<template>
  <a-modal
    title="申购信息"
    width="1000px"
    :maskClosable="maskClosable"
    :keyboard="keyboard"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :footer="null"
    @cancel="handleCancel"
  >
    <a-table
      ref="table"
      size="small"
      :columns="columns"
      :rowKey="record => record.id"
      :dataSource="applies"
      :pagination="false"
      :loading="loading"
    >
      <span slot="cTime" slot-scope="text">
        <a-tag>{{ text | dateFilter }}</a-tag>
      </span>
      <span slot="status" slot-scope="text,record">
        <editable-cell :text="text" @change="onCellChange(record.id, $event, record)"/>
      </span>
      <span slot="action" slot-scope="text,record">
        <div class="editable-row-operations">
          <a-popconfirm
            title="是否确定删除"
            okText="是"
            cancelText="否"
            @confirm="deleteConfirm(record)"
          ><a><a-icon type="delete"/>删除</a></a-popconfirm>
        </div>
      </span>
    </a-table>
  </a-modal>
</template>

<script>
  import { applyList, deleteApply, updateApplyStatus } from '@/api/customer'
  import moment from 'moment'
  import EditableCell from './EditableCell'
  import { errorHandler, successHandler } from '@/utils/request'

  export default {
    name: 'ApplyModal',
    components: {
      EditableCell
    },
    data () {
      return {
        maskClosable: true,
        keyboard: true,
        isAdd: true,
        visible: false,
        confirmLoading: false,
        customerId: undefined,
        pagination: {},
        loading: false,
        columns: [
          { title: '流水号', dataIndex: 'id' },
          { title: '股票代码', dataIndex: 'stockId' },
          { title: '股票名称', dataIndex: 'stockName' },
          { title: '申购数量(万股)', dataIndex: 'number' },
          // { title: '总额（元）', dataIndex: 'amount' },
          { title: '申购时间', dataIndex: 'ctime', scopedSlots: { customRender: 'cTime' } },
          { title: '申购状态', dataIndex: 'status', scopedSlots: { customRender: 'status' }, width: '140px' },
          { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' } }
        ],
        applies: []
      }
    },
    filters: {
      dateFilter (timestamp) {
        const formatString = 'YYYY-MM-DD HH:mm:ss'
        return moment(timestamp).format(formatString)
      },
      statusFilter (status) {
        if (!status || status === 3) {
          return '不通过'
        } else if (status === 1) {
          return '申购中'
        } else if (status === 2) {
          return '申购成功'
        }
        return '不通过'
      }
    },
    methods: {
      edit (record) {
        console.log('edit id', record)
        this.isAdd = false
        this.visible = true
        this.customerId = record.id
        this.loadTableData()
      },
      handleCancel (e) {
        console.log('Clicked cancel button')
        this.visible = false
      },
      onCellChange (id, value, record) {
        console.log('cell change', { id: id, value: value, data: record })
        if (record.status !== value) {
          // TODO 调用接口修改状态
          console.log('修改了申购状态')
          record.status = value
          updateApplyStatus(record).then(res => {
            console.log(res)
            successHandler(res)
            this.loadTableData()
          }).catch(err => {
            errorHandler(err)
          })
        }
      },
      deleteConfirm (record) {
        console.log('record', record)
        deleteApply(record).then(res => {
          console.log(res)
          successHandler(res)
          this.loadTableData()
        }).catch(err => {
          errorHandler(err)
        })
      },
      loadTableData () {
        applyList({ customerId: this.customerId }).then((res) => {
          console.log(res)
          this.applies = res.data
        }).catch(err => {
          console.log('something error', err)
        })
      }
    }
  }
</script>

<style scoped>

</style>
